<template>
  <div class="home">
    <Header></Header>
    <!-- <h1>首页</h1> -->
    <div class="main">
      <!-- 轮播图 -->
      <van-swipe :height="250" :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>

      <!-- 按钮选项区域 -->

      <!-- 商品陈列区域 -->
      <div class="shoplist">
        <div
          class="item"
          v-for="item in homeData"
          :key="item.good_id"
          @click="getItemId(item.good_id)"
        >
          <div class="shandow" ref="shadow">
            <div class="del">
              <span @click="notshow"
                ><van-icon name="cross" color="#fff"
              /></span>
            </div>
            <div class="every">
              <div class="one">商品不感兴趣</div>
              <div class="one">违规图片，举报</div>
            </div>
          </div>
          <div class="pic">
            <img :src="item.shopImgUrl" alt="" />
          </div>
          <div class="text">{{ item.good_describe }}</div>
          <div class="price"><span>￥</span>:{{ item.price }}</div>
          <!-- <span @click="isshow">...</span> -->
        </div>
      </div>
    </div>

    <Tabber></Tabber>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/home/Header"
import Tabber from "@/components/common/Tabber"

export default {
  name: "home",
  components: {
    Header,
    Tabber,
  },

  created() {
    // 获取首页数据值
    this.$api.home.homeData().then((res) => {
      console.log(res)
      this.homeData = res.data
    })

    // 获取轮播图
    this.$api.home.getRationData().then((res) => {
      console.log(res)
      this.images = res.data.map((item) => {
        return item.rotation_chart
      })
    })
  },

  data() {
    return {
      homeData: [],
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    }
  },

  methods: {
    // 点击item获取id
    getItemId(id) {
      console.log(id)
      this.$router.push({
        path: "/goodsdetaillist",
        query: {
          id,
        },
      })
    },
    isshow() {
      console.log(this.$refs.shadow)
      this.$refs.shadow.style = "display:block"
    },

    notshow() {
      this.$refs.shadow.style = "display:none"
    },
  },
}
</script>

<style lang="less" scoped>
Header {
  position: sticky;
  top: 0px;
  z-index: inherit;
}

.swipe {
  position: relative;
  width: 100%;
  height: 12.5rem /* 200/16 */;
  background-color: pink;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-swipe .van-swipe-item {
  color: #fff;
  width: 100%;
  height: 12.5rem /* 200/16 */;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.shoplist {
  // z-index: -9;
  display: flex;
  flex-direction: row;
  // flex: 1;
  justify-content: space-around;
  flex-wrap: wrap;
  // height: 100vh;
  padding: 0.9375rem /* 15/16 */ /* 20/16 */ /* 50/16 */ /* 10/16 */;
  // background-color: pink;

  .item {
    position: relative;
    margin-bottom: 1.25rem /* 20/16 */;
    width: 10rem /* 160/16 */ /* 150/16 */ /* 100/16 */;
    height: 13.125rem /* 210/16 */ /* 200/16 */;
    background-color: #fff;
    box-shadow: 0 5px 15px -5px rgb(0 0 0 / 50%);
    border-radius: 0.625rem /* 10/16 */;

    .shandow {
      position: absolute;
      display: none;
      background-color: rgb(0 0 0 / 40%);
      width: 100%;
      height: 100%;
      border-radius: 0.625rem /* 10/16 */;
    }
  }
}

.pic {
  width: 100%;
  height: 8.75rem /* 140/16 */;
  img {
    border-radius: 0.625rem 0.625rem 0 0 /* 10/16 */;
  }
}

.text {
  padding: 0 0.3125rem 0 0.3125rem /* 5/16 */;
  text-overflow: ellipsis; /* 将文本溢出显示... */
  overflow: hidden; /* 超出隐藏 */
  word-break: break-all; /* break-all(允许在单词内换行) */
  display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 呈现几行 我这里设置两行,可自行调试 */
}

.price {
  span:nth-child(1) {
    font-size: 0.875rem /* 14/16 */;
  }

  span:nth-child(2) {
    font-size: 1.5625rem /* 25/16 */;
    color: rgb(198, 210, 195);
    text-align: center;
    line-height: 100%;
    float: right;
  }
  padding: 0 0.5rem /* 8/16 */ 0 0.5rem /* 8/16 */ /* 5/16 */;
  color: red;
  font-size: 1.25rem /* 20/16 */;
}

.del {
  position: relative;
  width: 100%;
  height: 1.875rem /* 30/16 */ /* 20/16 */;
  line-height: 1.875rem;
  text-align: end;

  span {
    position: absolute;
    right: 0.625rem /* 10/16 */;
  }
}

.every {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.25rem /* 20/16 */ 0.625rem /* 10/16 */ 0 0.625rem /* 10/16 */;
  // background-color: pink;

  .one {
    margin-bottom: 0.625rem /* 10/16 */;
    color: #fff;
    font-size: 0.625rem /* 10/16 */;
    text-align: center;
    width: 100%;
    height: 1.875rem /* 30/16 */;
    border-bottom: rgba(255, 255, 255, 0.2) solid;
  }
}
</style>
